import React, { Component } from 'react'
import { Card, Table ,Modal,Button,message} from 'antd'
import axios from './../../axios'
import utils from '../../utils/utils'
export default class BasicTable extends Component {
    state = {
        dataSource2:[]
    }
    params ={
        page :2
    }
    componentDidMount() {
        const dataSource = [
            {
                id: '0',
                userName: 'jack',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海定区奥林匹克公园',
                time: '09:00'
            },
            {
                id: '1',
                userName: 'Tom',
                sex: '2',
                state: '2',
                interest: '2',
                birthday: '2000-2-2',
                address: '北京市海定区奥林匹克公园2',
                time: '09:22'
            },
            {
                id: '2',
                userName: 'Jarry',
                sex: '1',
                state: '4',
                interest: '5',
                birthday: '2000-03-02',
                address: '北京市海定区奥林匹克公园3',
                time: '09:30'
            }
        ]
        dataSource.map ((item,index)=>{
            item.key = index;
            return null
        })
        this.setState({
            dataSource
        })
        this.request();
    }
    request=()=>{
        let _this = this;
        axios.ajax({
            url:'/table/list',
            data:{
                params:{
                    page:this.params.page
                },
                isShowLoading:true
            }
        }).then((res)=>{
            if(res.code === 0){
                res.result.list.map((item, index) => {
                    item.key = index;
                    return null
                })
                this.setState({
                    dataSource2:res.result.list,
                    selectedRowKeys:[],
                    selectedRows:null,
                    pagination:utils.pagination(res,(current)=>{
                        _this.params.page=current;
                        this.request();
                    })
                })
            }
        })
    }
    onRowClick = (record, index)=>{
        let selectKey =[index];
        Modal.info({
            title:"info",
            content:`用户名${record.userName} 用户爱好 ${record.interest}`
        })
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem:record
        })
    }
    //多选执行删除动作
    handleDelte = (()=>{
        let rows = this.state.selectedRows;
        let ids = [];
        rows.map((item)=>{
            ids.push(item.id)
            return null

        })
        Modal.confirm({
            title:'删除提示',
            content:`您确定要删除这些数据吗？ ${ids.join(',')}`,
            onOk:()=>{
                message.success('删除成功')
                this.request();
            }
        })
    })
    render() {
        const selectedRowKeys =this.state.selectedRowKeys;
        const columns = [
            {
                title: 'id',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            }, {
                title: '性别',
                dataIndex: 'sex',
                render(sex){
                    return sex==="1" ? "男":"女"
                }
            }, {
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': "登陆",
                        '2': '退出',
                        '3': '注册',
                        '4': '验证',
                        '5': "失败"
                    }
                    return config[state];
                }
            }, {
                title: '爱好',
                dataIndex: 'interest',
                render(abx) {
                    let config = {
                        '1': "游泳",
                        '2': "滑雪",
                        '3': "跑步",
                        '4': "踢球",
                        '5': "乒乓球",
                        '6': "跳绳",
                        '7': "桌球",
                        '8': "骑车",
                    }
                    return config[abx]
                }
            }, {
                title: '生日',
                dataIndex: 'birthday'
            }, {
                title: '地址',
                dataIndex: 'address'
            }, {
                title: '早起时间',
                dataIndex: 'time'
            }
        ]
        const rowSelection={
            type:"radio",
            selectedRowKeys
        }
        const rowCheckSelection = {
            type: "checkbox",
            selectedRowKeys,
            onChange: (selectedRowKeys,selectedRows)=>{
                // let ids=[];
                // selectedRows.map((item)=>{
                //     ids.push(item.id)
                // })
                this.setState({
                    selectedRowKeys,
                    // selectedIds: ids
                    selectedRows
                })
            }
        }
        
        return (
            <div>
                <Card title="基础表单 borderd pagination 控制分页和border">
                    <Table
                    //borderd控制是否显示border
                        bordered
                        pagination={false}
                        columns={columns}
                        dataSource={this.state.dataSource}
                    >

                    </Table>
                </Card>
                <Card title="动态数据渲染表格-Mock">
                    <Table
                        rowKey={columns.id}
                        //borderd控制是否显示border
                        bordered
                        pagination={false}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                    >

                    </Table>
                </Card>
                <Card title="Mock-单选" style={{marginTop:10}}>
                    <Table
                        rowKey={columns.id}
                        //borderd控制是否显示border
                        bordered
                        rowSelection={rowSelection}
                        pagination={false}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        onRow={(record,index) => {
                            return {
                                onClick: ()=>{
                                    this.onRowClick(record, index);
                                }, // 点击行
                            };
                        }}
                    >

                    </Table>
                </Card>
                <Card title="Mock-多选" style={{ marginTop: 10 }}>
                    <div style={{marginBottom:10}}>
                        <Button onClick={this.handleDelte}>删除</Button>
                    </div>
                    <Table
                        rowKey={columns.id}
                        //borderd控制是否显示border
                        bordered
                        rowSelection={rowCheckSelection}
                        pagination={false}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                    >

                    </Table>
                </Card>
                <Card title="Mock-表格分页" style={{ marginTop: 10 }}>
                    <div style={{ marginBottom: 10 }}>
                        <Button onClick={this.handleDelte}>删除</Button>
                    </div>
                    <Table
                        rowKey={columns.id}
                        //borderd控制是否显示border
                        bordered
                        rowSelection={rowCheckSelection}
                        pagination={this.state.pagination}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                    >

                    </Table>
                </Card>
            </div>
        )
    }
}
